<template>
	<view>
		<Navbar :backUrl="backUrl"></Navbar>
		<view class="u-m-20">
			<!-- <u-swiper :list="list"></u-swiper> -->
			<u-image :src="detail.img_wap" border-radius="20" mode="widthFix"></u-image>
			<view class="u-m-t-20 u-card-box">
				<view>
					<span class="u-tag-box u-font-24" :class="detail.activityStatus !== 1 ? 'u-back-gray' : 'u-back-red'">{{handleGetStatus(detail.activityStatus)}}</span> 
					<span class="u-m-l-10 u-font-title">{{detail.title}}</span>
				</view>
				<view class="activity_tag">截止报名时间{{detail.deadline_time}}</view>
				<view class="u-flex">
					<u-icon name="clock-fill" color="#868B9A"></u-icon>
					<view class="u-m-l-10 u-font-desc u-font-333">{{detail.activity_time}}</view>
				</view>
				<view class="u-m-t-15" @click="handleCopyText(detail.activity_site)" v-if="detail.activity_site">
					<u-icon name="map-fill" color="#868B9A"></u-icon>
					<text class="u-m-l-10 u-font-desc u-font-333">{{ detail.activity_site }}</text>
				</view>
				<view class="u-m-t-15" @click="handleCopyText(detail.online_link)" v-if="detail.online_link">
					<u-icon name="IE-circle-fill" color="#868B9A"></u-icon>
					<text class="u-m-l-10 u-font-desc u-font-333">{{ detail.online_link }}</text>
				</view>
				<!-- <view class="u-m-t-15">
					<u-icon name="eye-fill" color="#868B9A"></u-icon>
					<text class="u-m-l-10 u-font-desc u-font-333">浏览量：{{ detail.view_number }}</text>
				</view> -->
				<view class="u-m-t-15 u-m-b-10 u-font-desc">
					<text>票价：</text>
					<text class="u-color-red u-text-line-15">{{ detail.ticketText }}</text>
				</view>
			</view>
			<view class="u-m-t-20 u-card-box">
				<view class="u-color-puce u-font-title">活动详情：</view>
				<view style="user-select:text !important;-webkit-user-select" :user-select="true" class="u-m-t-16">
					<u-parse class="pause_hid" :html="detail.introduction" :selectable="true" :tag-style="style"
						:lazy-load="true"></u-parse>
				</view>
			</view>
		</view>
		<view style="height: 200rpx;"></view>
		<Bottom :isShare="true" :isMoment="true" :btnText="btnText" :isDisable="detail.state !== 1 ? true : false" @confirm="bottomConfirm" @openMoment="openMoment"></Bottom>

		<!-- 选择票种 -->
		<u-popup v-model="ticketShow" mode="bottom" border-radius="20">
			<view class="u-p-30">
				<view class="u-font-title">选择票种</view>
				<view class="u-flex u-row-between u-ellipsis" :class="item.end_number == 0 ? 'ticker_none_box' : (item.check ? 'ticket_check_box' : 'ticket_box')" v-for="item in ticketList" :key="item.id" @click="checkTicket(item)">
					<view class="u-ellipsis">
						<view class="u-font-32 u-font-bold u-ellipsis">{{item.name}}</view>
						<!-- <view class="u-font-30 u-m-t-10">余票（{{item.end_number}}张）</view> -->
					</view>
					<view class="u-font-title u-font-bold" :class="item.check ? 'u-color-white' : 'u-color-puce'">{{item.price}}</view>
				</view>
				<view class="ticker_btn" @click="handleConfirm">确定</view>
			</view>
		</u-popup>
		
		<!-- 海报 -->
		<u-popup v-model="moment.show" mode="center" border-radius="20" width="600rpx" :closeable="true" :close-icon-color="'#fff'" @close="moment.show = false">
			<view>
				<u-image :src="moment.image" width="100%" mode="widthFix"></u-image>
			</view>
		</u-popup>
		
		<!-- 通用提示框 -->
		<Modal :show="modal.show" :confirmText="modal.confirm" :cancelText="modal.cancel" :modalContent="modal.content"
			:showCancel="modal.showCancel" :maskAble="modal.maskAble" @confirm="modalConfirm" @cancel="modal.show = false"
			@modeClose="modeClose"></Modal>
	</view>
</template>

<script>
	import Navbar from '@/components/Navbar.vue'
	import Bottom from '@/components/Bottom.vue'
	import Modal from '@/components/Modal.vue'
	import { activityStatus, formatContent, InitScene } from '@/utils/index.js'
	import { getActivityDetail,userActivitySign,activityQrCode, activityRecord } from '@/network/demand.js'
	import share from '@/mixins/share.js'
	export default {
		mixins: [share],
		components: {
			Navbar,
			Bottom,
			Modal
		},
		data() {
			return {
				ticketShow: false,
				ticketList:[],
				user_id: uni.getStorageSync("user_id"),
				activity_id: 0,
				inviterId: 0,
				detail:{},
				style: {
					div: 'padding: 0 !important',
					video: 'width: 100%'
				},
				moment: {
					show: false,
					image: ''
				},
				btnText:'立即报名',
				backUrl: 'demand',
				modal: {
					show: false,
					showCancel: true,
					maskAble: true,
					confirm: '申请',
					cancel: '取消',
					content: '',
					isRegister: false
				},
			}
		},
		onLoad(options){
      wx.hideShareMenu()
			if (options.scene) {
				options.id = InitScene(options.scene).id
				options.inviterId = InitScene(options.scene).inviterId
			}
			this.inviterId = options.inviterId
			this.activity_id = options.id
			this.handleGetRecord()
			this.handleGetActivityDetail()
			if(options.isBack){
				this.backUrl = ''
			}
		},
		methods: {
			checkTicket(val){
				if(val.end_number == 0){
					return
				}else{
					this.ticketList.map(item=>item.check = false)
					val.check = true
				}
			},
			handleGetRecord(){
				activityRecord({activity_id: this.activity_id})
			},
			handleGetActivityDetail(){
				const params = {
					user_id: this.user_id,
					activity_id: this.activity_id
				}
				getActivityDetail(params).then(res=>{
					res.data.ticketText = res.data.activityInfo.ticket_info.map(item=> `${item.name}：${item.price}`).join(" | ")
					this.detail = res.data
					res.data.activityInfo.ticket_info.map((item,index)=>{
						const params = {
							...item,
							check: false
						}
						this.ticketList.push(params)
					})
					this.btnText = this.haneleGetactivityState(this.detail.state)
					/* 分享配置 */
					this.mixinsShare.page = `/pages/activityDetail/activityDetail?id=${res.data.activityInfo.id}&inviterId=${uni.getStorageSync("user_id")}`
					this.mixinsShare.title = `邀请你参加${res.data.title}`
					this.mixinsShare.image = res.data.img_wap
          setTimeout(() => {
            wx.showShareMenu({
              withShareTicket: true,
              menus: ['shareAppMessage', 'shareTimeline']
            })
          }, 1000)
				})
			},
			handleGetStatus(val){
				return activityStatus()[val]
			},
			haneleGetactivityState(val){
				const status = ['', '立即报名', '', '报名截止', '已结束', '待审核', `已报名 / ${this.detail.ticket_name}`, '已取消','已签到']
				return status[val]
			},
			handleCopyText(val){
				uni.setClipboardData({
					data:val,
					success: function(){
						uni.showToast({
							title: "复制成功"
						})
					}
				})
			},
			handleConfirm(){
				if(this.momentJudge()){
					let checkObj = this.ticketList.filter(item=>item.check == true)[0]
					let suppl = this.detail.activityInfo.suppl
					if(checkObj.is_suit == 0){
						uni.showToast({
							title: "该票种暂不适用，请选择其他票种",
							icon: "none"
						})
					}else{
						// is_charge 是否付费  0否 1是   suppl 是否补录信息  0否 1是
						if(checkObj.end_number > 0){
							if(checkObj.is_charge == 0 && suppl == 0){
								const params = {
									user_id: this.user_id,
									activity_id: this.activity_id,
									ticket_id: checkObj.id,
									reference_id: this.inviterId,
								}
								userActivitySign(params).then(res=>{
									uni.showToast({
										title:`${res.msg}`,
										icon: "success"
									})
									this.handleGetActivityDetail()
									this.ticketShow = false
								})
							}else if(checkObj.is_charge == 1 && suppl == 0){
								const params = {
									activity_id: this.activity_id,
									ticket_id: checkObj.id,
									inviterId: this.inviterId
								}
								uni.navigateTo({
									url: "/operate/activityPay/activityPay?params=" + JSON.stringify(params)
								})
								this.ticketShow = false
							}else {
								const params = {
									activity_id: this.activity_id,
									ticket_id: checkObj.id,
									is_charge: checkObj.is_charge,
									inviterId: this.inviterId
								}
								uni.navigateTo({
									url: "/operate/activitySignup/activitySignup?params=" + JSON.stringify(params)
								})
								this.ticketShow = false
							}
						}
					}
				}
			},
			openMoment(){
				if(this.momentJudge()){
					if(this.moment.image){
						this.moment.show = true
					}else{
						uni.showLoading({
							title:"加载中"
						})
						const params = {
							activity_id: this.activity_id,
							user_id: uni.getStorageSync("user_id")
						}
						activityQrCode(params).then(res=>{
							uni.hideLoading()
							this.moment.image = res.data.url
							this.moment.show = true
						})
					}	
				}
			},
			bottomConfirm(){
				if(this.momentJudge()){
					let status = uni.getStorageSync("user_status")
					if(status == '0'){
						this.modal.content = '部分功能需注册解锁，注册后即可体验完整服务'
						this.modal.confirm = '前往注册'
						this.modal.show = true
						this.modal.isRegister = true
					}else{
						this.ticketShow = true
					}
				}
			},
			modalConfirm(){
				if(this.modal.isRegister){
					uni.setStorageSync("inviterUrl",`pages/activityDetail/activityDetail?id=${this.activity_id}&inviterId=${this.inviterId}`)
					uni.navigateTo({
						url: "/pages/register/register"
					})
				}
				this.modal.show = false
			},
			momentJudge() {
				if (!uni.getStorageSync("user_id")) {
					uni.showToast({
						icon: "none",
						duration: 2000,
						title: "请先点击下方'前往小程序'方可对接",
					})
					return false
				} else {
					if(uni.getStorageSync("user_isBlack") == 0){
						return true
					}else{
						this.modal.content = '当前用户权限受限，请联系系统管理员'
						this.modal.confirm = '确定'
						this.modal.show = true
						return false
					}
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.activity_tag {
		font-size: 24rpx;
		background: #eee;
		color: #fb6316;
		width: fit-content;
		padding: 5rpx 20rpx;
		border-radius: 10rpx;
		margin: 30rpx 0 15rpx 0;
	}

	.ticket_box {
		background: #fff;
		border: 1rpx solid #999;
		border-radius: 20rpx;
		padding: 30rpx 50rpx;
		margin-top: 30rpx;
	}
	
	.ticker_none_box{
		background: #ccc;
		border: 1rpx solid #999;
		border-radius: 20rpx;
		padding: 30rpx 50rpx;
		margin-top: 30rpx;
	}
	
	.ticket_check_box{
		background: #fb6316;
		color: #fff;
		border-radius: 20rpx;
		padding: 30rpx 50rpx;
		margin-top: 30rpx;
	}

	.ticker_btn {
		background: #fb6316;
		color: #fff;
		padding: 26rpx 0;
		text-align: center;
		border-radius: 20rpx;
		margin: 40rpx 0 20rpx 0;
	}
</style>